<template>
  <view class="container">
    <view class="header">
      <view class="header-left" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="app-title">日常出行拼车</text>
      <view class="header-icons">
      </view>
    </view>

    <view class="search-section">
      <view class="search-bar">
        <text class="search-icon">🔍</text>
        <input class="search-input" v-model="searchKeyword" placeholder="找工作、找服务、求职找房子" />
        <button class="search-btn" @click="performSearch">搜索</button>
      </view>
    </view>

    <view class="tabs-section">
      <scroll-view class="tabs-scroll" scroll-x="true">
        <view class="tabs-container">
          <view
            class="tab-item"
            :class="{ active: activeTab === index }"
            v-for="(tab, index) in tabs"
            :key="index"
            @click="switchTab(index)"
          >
            <text class="tab-text">{{ tab.name }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="content-list">
      <view class="content-item" v-for="(item, index) in filteredList" :key="index" @click="goToDetail(item)">
        <view class="item-header">
          <view class="user-info">
            <image class="user-avatar" :src="item.avatar || '/static/images/profile.jpg'" mode="aspectFill"></image>
            <view class="user-details">
              <text class="user-name">{{ item.userName }}</text>
              <text class="publish-date">{{ item.region }}</text>
            </view>
          </view>
          <view class="item-tag">{{ getCategoryName(item.category) }}</view>
          <button class="call-btn" @click.stop="makeCall(item)">打电话</button>
        </view>

        <view class="item-content">
          <text class="item-title">{{ item.departureTime }}出发从{{ item.fromText }} → {{ item.toText }}</text>
          <text class="item-description">乘车时间：{{ item.departureTime }}</text>
        </view>

        <view class="item-details">
          <view class="detail-item"><text class="detail-label">乘车人数：</text><text class="detail-value">{{ item.passengers }}人</text></view>
          <view class="detail-item"><text class="detail-label">出发地：</text><text class="detail-value">{{ item.fromText }}</text></view>
          <view class="detail-item"><text class="detail-label">目的地：</text><text class="detail-value">{{ item.toText }}</text></view>
          <view class="detail-item"><text class="detail-label">上车地点：</text><text class="detail-value">{{ item.pickupLocation }}</text></view>
          <view class="detail-item"><text class="detail-label">联系人：</text><text class="detail-value">{{ item.contactPerson }}</text></view>
        </view>

        <view class="item-image" v-if="item.image">
          <image :src="item.image" mode="widthFix" style="width:100%"></image>
        </view>

        <view class="item-footer">
          <view class="stats">
            <text class="stat-text">{{ item.views || 0 }}浏览</text>
            <text class="stat-text">{{ item.shares || 0 }}分享</text>
          </view>
          <text class="publish-info">{{ item.publishDate }}发布</text>
        </view>
      </view>
    </view>

    <view class="bottom-nav">
      <view class="nav-tab" @click="navigateToTab('home')">
        <text class="nav-icon">🏠</text>
        <text class="nav-text">首页</text>
      </view>
      <view class="nav-tab publish" @click="navigateToTab('publish')">
        <text class="publish-icon">+</text>
        <text class="nav-text">发布</text>
      </view>
      <view class="nav-tab" @click="navigateToTab('mine')">
        <text class="nav-icon">👤</text>
        <text class="nav-text">我的</text>
      </view>
    </view>
  </view>
  
</template>

<script>
import { getCarpoolList } from '@/api/carpool'
import { listByTypePaged } from '@/api/system/dict/data'
export default {
  data() {
    return {
      searchKeyword: '',
      activeTab: 0,
      tabs: [ { name: '全部', key: 'all' } ],
      list: [
        
          
      ]
    }
  },
  onShow() {
    this.fetchTabs()
    this.fetchList()
  },
  computed: {
    filteredList() {
      if (this.activeTab === 0 || this.activeTab >= this.tabs.length) {
        return this.list
      }
      const key = this.tabs[this.activeTab].key
      return this.list.filter(i => i.category === key)
    }
  },
  methods: {
    async fetchTabs() {
      try {
        const res = await listByTypePaged('travel_carpool_type', 1, 100)
        const rows = res.rows || []
        if (rows.length) {
          const dictTabs = rows.map(r => ({ name: r.dictLabel, key: r.dictValue }))
          this.tabs = [ { name: '全部', key: 'all' }, ...dictTabs ]
        }
      } catch (e) {
        // 失败则保留默认静态 tabs
        console.log('加载拼车类型失败，使用默认', e)
      }
    },
    async fetchList() {
      try {
        const res = await getCarpoolList({ pageNum: 1, pageSize: 20 })
        // RuoYi 列表通常为 { rows, total, code }
        const rows = res.rows || []
        if (rows.length) {
          this.list = rows.map((r, idx) => this.normalizeItem(r, idx))
        }
      } catch (e) {
        // 失败保留静态数据
        console.log('获取拼车列表失败，使用静态数据', e)
      }
    },
    normalizeItem(raw, idx) {
      // 尽量兼容不同字段命名，缺失时回退
      const category = raw.category || raw.type || 'personFindCar'
      const fromText = raw.fromText || raw.from || raw.startAddress || raw.departure || `${raw.fromProvince || ''} ${raw.fromCity || ''} ${raw.fromArea || ''}`.trim()
      const toText = raw.toText || raw.to || raw.endAddress || raw.destination || `${raw.toProvince || ''} ${raw.toCity || ''} ${raw.toArea || ''}`.trim()
      const passengers = raw.passengers || raw.seatCount || raw.people || 1
      const departureTime = raw.departureTime || raw.startTime || raw.rideTime || ''
      const pickupLocation = raw.pickupLocation || raw.getOnAddress || raw.meetPoint || ''
      const contactPerson = raw.contactPerson || raw.linkman || raw.linkName || raw.userName || '联系人'
      const contactPhone = raw.contactPhone || raw.phone || raw.mobile || ''
      const publishDate = raw.publishDate || raw.createTime || ''
      const title = raw.title || `${this.getCategoryName(category)} ${fromText} → ${toText}`
      return {
        id: raw.id || idx + 1,
        category,
        userName: contactPerson,
        region: raw.region || '',
        avatar: '/static/images/profile.jpg',
        departureTime,
        fromText,
        toText,
        passengers,
        pickupLocation,
        contactPerson,
        contactPhone,
        image: this.list[idx]?.image || '/static/images/banner/banner01.jpg',
        publishDate,
        views: raw.viewCount || 0,
        shares: raw.shareCount || 0,
        title
      }
    },
    goBack() {
      uni.navigateBack()
    },
    switchTab(index) {
      this.activeTab = index
    },
    performSearch() {
      if (!this.searchKeyword.trim()) {
        uni.showToast({ title: '请输入搜索关键词', icon: 'none' })
        return
      }
      this.fetchList()
      uni.showToast({ title: `搜索: ${this.searchKeyword}`, icon: 'none' })
    },
    makeCall(item) {
      uni.showToast({ title: `拨打电话给${item.contactPerson}`, icon: 'none' })
    },
    navigateToTab(tab) {
      if (tab === 'publish') {
        uni.showToast({ title: '发布功能', icon: 'none' })
      } else if (tab === 'mine') {
        uni.showToast({ title: '我的页面', icon: 'none' })
      } else if (tab === 'home') {
        uni.switchTab({ url: '/pages/index' })
      }
    },
    goToDetail(item) {
      uni.navigateTo({ url: `/pages/carpool/detail?id=${item.id}` })
    },
    getCategoryName(key) {
      // 优先从 tabs 字典中取
      const found = this.tabs.find(t => t.key === key)
      if (found) return found.name
      const map = { personFindCar: '人找车', carFindPerson: '车找人', goodsFindCar: '货找车', carFindGoods: '车找货' }
      return map[key] || '拼车'
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.header {
  background-color: #4CAF50;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left { display: flex; align-items: center; }
.back-icon { color: white; font-size: 36rpx; font-weight: bold; }
.app-title { color: white; font-size: 36rpx; font-weight: bold; }
.header-icons { display: flex; gap: 20rpx; }
.icon { color: white; font-size: 32rpx; }

.search-section { background-color: #4CAF50; padding: 0 30rpx 30rpx; }
.search-bar { display: flex; align-items: center; background-color: #f0f0f0; border-radius: 25rpx; padding: 20rpx 30rpx; }
.search-icon { font-size: 32rpx; margin-right: 20rpx; }
.search-input { flex: 1; font-size: 28rpx; }
.search-btn { background-color: #4CAF50; color: white; border: none; border-radius: 20rpx; padding: 15rpx 25rpx; font-size: 26rpx; }

.tabs-section { background-color: white; border-bottom: 1rpx solid #f0f0f0; margin-bottom: 20rpx; }
.tabs-scroll { white-space: nowrap; }
.tabs-container { display: flex; padding: 0 20rpx; }
.tab-item { padding: 25rpx 30rpx; text-align: center; border-bottom: 4rpx solid transparent; white-space: nowrap; }
.tab-item.active { border-bottom-color: #4CAF50; background-color: #e8f5e8; }
.tab-text { font-size: 28rpx; color: #333; }
.tab-item.active .tab-text { color: #4CAF50; font-weight: bold; }

.content-list { background-color: white; }
.content-item { padding: 30rpx; border-bottom: 1rpx solid #f0f0f0; }
.item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20rpx; }
.user-info { display: flex; align-items: center; flex: 1; }
.user-avatar { width: 60rpx; height: 60rpx; border-radius: 50%; margin-right: 15rpx; }
.user-details { display: flex; flex-direction: column; }
.user-name { font-size: 28rpx; color: #333; font-weight: bold; margin-bottom: 5rpx; }
.publish-date { font-size: 24rpx; color: #999; }
.item-tag { background-color: #4CAF50; color: white; font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 12rpx; margin: 0 20rpx; }
.call-btn { background-color: #4CAF50; color: white; border: none; border-radius: 20rpx; padding: 12rpx 20rpx; font-size: 24rpx; }

.item-content { margin-bottom: 20rpx; }
.item-title { font-size: 30rpx; color: #333; font-weight: bold; margin-bottom: 10rpx; display: block; }
.item-description { font-size: 26rpx; color: #666; line-height: 1.5; display: block; }

.item-details { margin-bottom: 20rpx; }
.detail-item { display: flex; align-items: flex-start; margin-bottom: 8rpx; }
.detail-label { font-size: 24rpx; color: #4CAF50; min-width: 140rpx; }
.detail-value { font-size: 24rpx; color: #333; flex: 1; }

.item-footer { display: flex; justify-content: space-between; align-items: center; }
.stats { display: flex; gap: 20rpx; }
.stat-text { font-size: 24rpx; color: #999; }
.publish-info { font-size: 24rpx; color: #999; }

.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background-color: white; display: flex; padding: 15rpx 0; border-top: 1rpx solid #f0f0f0; z-index: 1000; }
.nav-tab { flex: 1; display: flex; flex-direction: column; align-items: center; color: #999; }
.nav-tab.active { color: #333; }
.nav-icon { font-size: 40rpx; margin-bottom: 8rpx; }
.nav-text { font-size: 22rpx; }
.nav-tab.publish { position: relative; }
.publish-icon { background-color: #4CAF50; color: white; width: 80rpx; height: 80rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 50rpx; font-weight: bold; margin-bottom: 8rpx; }
</style>


